<template>
  <div
    class="shadow-lg rounded-sm p-3 flex flex-col justify-between w-full md:w-2/4 space-y-4"
  >
    <!-- 推荐标题 -->
    <h4
      class="text-sm font-semibold text-gray-800 dark:text-white mb-4 text-center md:text-left"
    >
      推荐文章
    </h4>
    <!-- 推荐内容 -->
    <ul class="space-y-4 text-sm text-gray-600 dark:text-gray-400">
      <li
        v-for="(article, index) in articles"
        :key="index"
        class="relative rounded-sm shadow-lg p-4 backdrop-blur-sm flex flex-col space-y-2 md:flex-row md:space-y-0 md:items-center md:justify-between"
      >
        <!-- 文章标题 -->
        <a
          :href="article.link"
          target="_blank"
          rel="noopener noreferrer"
          class="text-blue-500 hover:underline text-base font-medium md:w-1/2"
        >
          {{ article.title }}
        </a>
        <!-- 文章描述 -->
        <div class="md:w-1/2">
          <p class="text-sm text-gray-600 dark:text-gray-200">
            {{ article.description }}
          </p>
          <p class="text-xs text-gray-500 dark:text-gray-200 mt-2">
            上传时间：{{ formatDate(article.uploadDate) }}
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
const articles = [
  {
    title: 'Chrome浏览器中的事件循环',
    description: 'EvenLoop',
    link: 'https://example.com/vue3',
    uploadDate: '2024-11-10T08:00:00Z'
  },
  {
    title: 'NextJS+NodeJS',
    description: 'React服务端渲染框架',
    link: 'https://example.com/js-async',
    uploadDate: '2024-11-11T10:00:00Z'
  },
  {
    title: 'NuxtJS+NodeJS',
    description: 'Vue服务端渲染框架',
    link: 'https://example.com/ts-best-practices',
    uploadDate: '2024-11-12T12:00:00Z'
  }
]

const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}
</script>

<style scoped>
/* 毛玻璃效果 */
.backdrop-blur-sm {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
</style>
